<!doctype html>
<html>
    <head>
        <title>ZenFilter example</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
        <script src="js/jquery-calendrical/jquery.calendrical.js"></script>
		<script src="js/jquery.numeric.pack.js"></script>
        <script src="js/jquery.selectboxes.min.js"></script>
        <script src="js/jquery.zenfilter.js"></script>
        <link rel="stylesheet" href="js/jquery-calendrical/calendrical.css">
        <link rel="stylesheet" href="css/zenfilter.css">
        <style>
            body {
                font: 16px Georgia, Arial, sans-serif;
                text-align: center;
            }
            pre {
                font: 11px Menlo, Consolas, Monaco, "DejaVu Sans Mono", Courier, "Courier New";
            }
            #wrapper {
                width: 960px;
                text-align: left;
                margin: 0 auto;
            }
            section {
                display: inline-block;
                margin-bottom: 15px;
            }
            div.demo input {
                width: 100px;
            }
            div.demo strong {
                width: 40px;
                display: inline-block;
            }
            div.demo, div.html, div.javascript {
                float: left;
                width: 300px;
                margin-right: 30px;
                text-align: left;
            }
            div.javascript {
                margin-right: 0;
            }
        </style>
    </head>
    <body>
        <div id="wrapper">
            <header>
                <h1>ZenFilter</h1>
            </header>
            
            <section>
                <header>
                    <h2>Simple</h2>
                </header>
                
                <div class="demo">
                    <div class="example-1"></div>
                    <script>
                        $(function() {
                            $('.example-1').zenfilter({
								data: [
									{ label: "Code", type: "numeric", fieldname: "id" },
									{ label: "Title", type: "string", fieldname: "title" },
									{ label: "Date", type: "date", fieldname: "date" },
									{ label: "Time", type: "time", fieldname: "time" }
								]});
                        });
                    </script>
                </div>
                
                <div class="html">
                    <pre>
<font color="#2040a0"><strong><font color="4444FF"><strong>&lt;</strong></font><font color="#2040a0">input</font> <font color="#2040a0">id=</font><font color="#008000">"date"</font> <font color="#2040a0">type=</font><font color="#008000">"text"</font> <font color="#2040a0">/</font><font color="4444FF"><strong>&gt;</strong></font></strong></font>
<font color="#2040a0"><strong><font color="4444FF"><strong>&lt;</strong></font><font color="#2040a0">input</font> <font color="#2040a0">id=</font><font color="#008000">"time"</font> <font color="#2040a0">type=</font><font color="#008000">"text"</font> <font color="#2040a0">/</font><font color="4444FF"><strong>&gt;</strong></font></strong></font></pre>
                </div>
                
                <div class="javascript">
                    <pre>
$(<font color="#008000">'#date'</font>).calendricalDate()<font color="4444FF">;</font> 
$(<font color="#008000">'#time'</font>).calendricalTime()<font color="4444FF">;</font></pre>
                </div>
            </section>
            
            <section>
                <header>
                    <h2>Date Range</h2>
                </header>

                <div class="demo">
                    <p>
                        <input id="date_start" type="text" />
                        <input id="date_end"   type="text" />
                    </p>
                    <script>
                        $(function() {
                            $('#date_start, #date_end')
                                .calendricalDateRange(); 
                        });
                    </script>
                </div>

                <div class="html">
                    <pre>
<font color="#2040a0"><strong><font color="4444FF"><strong>&lt;</strong></font><font color="#2040a0">input</font> <font color="#2040a0">id=</font><font color="#008000">"date_start"</font> <font color="#2040a0">type=</font><font color="#008000">"text"</font> <font color="#2040a0">/</font><font color="4444FF"><strong>&gt;</strong></font></strong></font>
<font color="#2040a0"><strong><font color="4444FF"><strong>&lt;</strong></font><font color="#2040a0">input</font> <font color="#2040a0">id=</font><font color="#008000">"date_end"</font>   <font color="#2040a0">type=</font><font color="#008000">"text"</font> <font color="#2040a0">/</font><font color="4444FF"><strong>&gt;</strong></font></strong></font></pre>
                </div>

                <div class="javascript">
                    <pre>
$(<font color="#008000">'#date_start, #date_end'</font>)
    .calendricalDateRange()<font color="4444FF">;</font></pre>
                </div>
            </section>
            
            <section>
                <header>
                    <h2>Time Range</h2>
                </header>

                <div class="demo">
                    <p>
                        <input id="time_start" type="text" />
                        <input id="time_end"   type="text" />
                    </p>
                    <script>
                        $(function() {
                            $('#time_start, #time_end')
                                .calendricalTimeRange(); 
                        });
                    </script>
                </div>

                <div class="html">
                    <pre>
<font color="#2040a0"><strong><font color="4444FF"><strong>&lt;</strong></font><font color="#2040a0">input</font> <font color="#2040a0">id=</font><font color="#008000">"time_start"</font> <font color="#2040a0">type=</font><font color="#008000">"text"</font> <font color="#2040a0">/</font><font color="4444FF"><strong>&gt;</strong></font></strong></font>
<font color="#2040a0"><strong><font color="4444FF"><strong>&lt;</strong></font><font color="#2040a0">input</font> <font color="#2040a0">id=</font><font color="#008000">"time_end"</font>   <font color="#2040a0">type=</font><font color="#008000">"text"</font> <font color="#2040a0">/</font><font color="4444FF"><strong>&gt;</strong></font></strong></font></pre>
                </div>

                <div class="javascript">
                    <pre>
$(<font color="#008000">'#time_start, #time_end'</font>)
    .calendricalTimeRange()<font color="4444FF">;</font></pre>
                </div>
            </section>
            
                        <section>
                            <header>
                                <h2>DateTime Range</h2>
                            </header>

                            <div class="demo">
                                <p>
                                    <strong>From:</strong>
                                    <input id="dt_date_start" type="text" />
                                    <input id="dt_time_start" type="text" />
                                </p>
                                <p>
                                    <strong>To:</strong>
                                    <input id="dt_date_end"   type="text" />
                                    <input id="dt_time_end"   type="text" />
                                </p>
                                <script>
                                    $(function() {
                                        $('#dt_date_start, #dt_time_start,' +
                                          '#dt_date_end,   #dt_time_end')
                                              .calendricalDateTimeRange();
                                    });
                                </script>
                            </div>

                            <div class="html">
                                <pre><font color="#2040a0"><strong><font color="4444FF"><strong>&lt;</strong></font><font color="#2040a0">p</font><font color="4444FF"><strong>&gt;</strong></font></strong></font>
    <font color="#2040a0"><strong><font color="4444FF"><strong>&lt;</strong></font><font color="#2040a0">strong</font><font color="4444FF"><strong>&gt;</strong></font></strong></font>From:<font color="#2040a0"><strong><font color="4444FF"><strong>&lt;</strong></font><font color="#2040a0">/strong</font><font color="4444FF"><strong>&gt;</strong></font></strong></font>
    <font color="#2040a0"><strong><font color="4444FF"><strong>&lt;</strong></font><font color="#2040a0">input</font> <font color="#2040a0">id=</font><font color="#008000">"dt_date_start"</font> <font color="#2040a0">type=</font><font color="#008000">"text"</font> <font color="#2040a0">/</font><font color="4444FF"><strong>&gt;</strong></font></strong></font>
    <font color="#2040a0"><strong><font color="4444FF"><strong>&lt;</strong></font><font color="#2040a0">input</font> <font color="#2040a0">id=</font><font color="#008000">"dt_time_start"</font> <font color="#2040a0">type=</font><font color="#008000">"text"</font> <font color="#2040a0">/</font><font color="4444FF"><strong>&gt;</strong></font></strong></font>
<font color="#2040a0"><strong><font color="4444FF"><strong>&lt;</strong></font><font color="#2040a0">/p</font><font color="4444FF"><strong>&gt;</strong></font></strong></font>
<font color="#2040a0"><strong><font color="4444FF"><strong>&lt;</strong></font><font color="#2040a0">p</font><font color="4444FF"><strong>&gt;</strong></font></strong></font>
    <font color="#2040a0"><strong><font color="4444FF"><strong>&lt;</strong></font><font color="#2040a0">strong</font><font color="4444FF"><strong>&gt;</strong></font></strong></font>To:<font color="#2040a0"><strong><font color="4444FF"><strong>&lt;</strong></font><font color="#2040a0">/strong</font><font color="4444FF"><strong>&gt;</strong></font></strong></font>
    <font color="#2040a0"><strong><font color="4444FF"><strong>&lt;</strong></font><font color="#2040a0">input</font> <font color="#2040a0">id=</font><font color="#008000">"dt_date_end"</font>   <font color="#2040a0">type=</font><font color="#008000">"text"</font> <font color="#2040a0">/</font><font color="4444FF"><strong>&gt;</strong></font></strong></font>
    <font color="#2040a0"><strong><font color="4444FF"><strong>&lt;</strong></font><font color="#2040a0">input</font> <font color="#2040a0">id=</font><font color="#008000">"dt_time_end"</font>   <font color="#2040a0">type=</font><font color="#008000">"text"</font> <font color="#2040a0">/</font><font color="4444FF"><strong>&gt;</strong></font></strong></font>
<font color="#2040a0"><strong><font color="4444FF"><strong>&lt;</strong></font><font color="#2040a0">/p</font><font color="4444FF"><strong>&gt;</strong></font></strong></font></pre>
                            </div>

                            <div class="javascript">
                                <pre>$(<font color="#008000">'#dt_date_start, #dt_time_start,'</font> +
  <font color="#008000">'#dt_date_end,   #dt_time_end'</font>)
    .calendricalDateTimeRange()<font color="4444FF">;</font></pre>
                            </div>
                        </section>
        </div>
    </body>
</html>
